<!DOCTYPE html>
<html>
<head>
    {include file="public/header" /}
    <link rel="stylesheet" href="/static/admin/voucher.css">
    <link rel="stylesheet" type="text/css" href="/static/taginput/css/normalize.css" /><!--CSS RESET-->
    <link rel="stylesheet" href="/static/taginput/src/jquery.tagsinput-revisited.css" />
    <!--<link rel="stylesheet" href="/static/layuimini/lib/jq-module/zyupload/zyupload-1.0.0.min.css" media="all">-->
</head>
<body>
<div style="padding-top:10px;" class="layui-form layuimini-form">
    <input type="hidden" name="id" value="{$info.id}">
    <div class="layui-form-item">
        <label class="layui-form-label required">商品名称</label>
        <div class="layui-input-block">
            <input type="text" name="pro_title" lay-verify="required" lay-reqtext="商品名称不能为空" placeholder="请输入商品名称" value="{$info.pro_title}" class="layui-input" autocomplete="off">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label required">商品类型</label>
        <div class="layui-input-block">
            <input type="radio" name="pro_type" lay-filter="pro_type" value="1" title="余额" {if condition="$info.pro_type==1"}checked=""{/if} disabled>
            <input type="radio" name="pro_type" lay-filter="pro_type" value="2" title="恢复材料" {if condition="$info.pro_type==2"}checked=""{/if} disabled>
            <input type="radio" name="pro_type" lay-filter="pro_type" value="3" title="卡券" {if condition="$info.pro_type==3"}checked=""{/if} disabled>
        </div>
    </div>
    <div class="layui-form-item layui-form-text" id="showContext">
        {if condition="$info.pro_type==1"}
            <label class="layui-form-label">金额</label>
            <div class="layui-input-block">
                <input type="number" name="pro_number" min="0" lay-verify="required"  value="{$info.pro_number}" class="layui-input" autocomplete="off">
            </div>
        {elseif condition="$info.pro_type==2"}
        <label class="layui-form-label">数量</label>
        <div class="layui-input-block">
            <input type="number" name="pro_number" min="1" lay-verify="required"  value="{$info.pro_number}" class="layui-input" autocomplete="off">

        </div>
        {else/}
        <label class="layui-form-label">选择卡券</label>
        <div class="layui-input-block" style="display: flex">
            <button class="layui-btn" onclick="checkVoucher()">点击添加</button>
            <input type="hidden" name="voucher_id" id="voucher_id" value="{$info.pro_number}">
            <div style="margin-left:10px;padding-top:10px;" id="voucherShow">{$info.title}+"    ￥"+{$info.price}

            </div>
        </div>
        {/if}
    </div>
    {if condition="$info.pro_type==3"}
    <div class="layui-form-item layui-form-text" id="period">
        <label class="layui-form-label">有效期</label>
        <div class="layui-input-block">
            <input type="number" name="period" min="1" value="{$info.period}" lay-verify="required"  value="" class="layui-input" autocomplete="off">
        </div>
    </div>
    {/if}
    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">所需积分</label>
        <div class="layui-input-block">
            <input type="number" name="integral_num" min="1" lay-verify="required"  value="{$info.integral_num}" class="layui-input" autocomplete="off">
        </div>
    </div>
    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">上架数量</label>
        <div class="layui-input-block">
            <input type="number" name="pro_num" min="1" lay-verify="required"  value="{$info.pro_num}" class="layui-input" autocomplete="off">
            <input type="hidden" name="old_pro_num" value="{$info.pro_num}">
            <input type="hidden" name="old_plurs_num" value="{$info.plurs_num}">
        </div>
    </div>
    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">限购数量</label>
        <div class="layui-input-block">
            <input type="number" name="limit_num" min="1" lay-verify="required"  value="{$info.limit_num}" class="layui-input" autocomplete="off">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">上架时间</label>
        <div class="layui-input-inline">
            <input type="text" name="putaway_time" id="start_time"  value="{$info.putaway_time}" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">下架时间</label>
            <div class="layui-input-inline">
                <input type="text" name="under_time" id="end_time" value="{$info.under_time}"  placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
            </div>
        </div>
    </div>
    <!--<div class="layui-form-item layui-form-text">-->
        <!--<label class="layui-form-label">标签</label>-->
        <!--<div class="layui-input-block">-->
            <!--<input type="text" id="form-tags-1" name="tages_name" lay-verify="required"  value="{$info.tages_name}" class="layui-input" autocomplete="off">-->
        <!--</div>-->
    <!--</div>-->
    <div class="layui-form-item">
        <label class="layui-form-label">状态</label>
        <div class="layui-input-block">
            <input type="checkbox"  name="pro_status" value="{$info.pro_status}" lay-skin="switch" lay-filter="switchTest" lay-text="开启|关闭" {if condition='$info.pro_status==1'}checked=""{/if}>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">缩略图上传</label>
        <input type="hidden" id="imgurlHidden" name="imgurl" value="">
        <input type="hidden" id="oldimgurlHidden" name="old_imgurl" value="{$info.imgurl}">
        <div class="layui-input-inline uploadHeadImage">
            <div class="layui-upload-drag" id="headImg">
                <i class="layui-icon"></i>
                <p>点击上传图片，或将图片拖拽到此处</p>
            </div>
        </div>
        <div class="layui-input-inline">
            <div class="layui-upload-list" style="margin-top: 5px;">
                <img class="layui-upload-img headImage" style="height: 100px;" src="/upload/{$info.imgurl}" id="imgurl">
                <p id="demoText"></p>
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">banner上传</label>
        <input type="hidden" id="banner_images" name="bannerurl" value="{$info.bannerurl}">
        <div class="layui-upload">
            <div class="layui-form-mid layui-word-aux">
                <button type="button" class="layui-btn" id="multiple_banner">多图片上传</button>
                <span class="x-red">*</span>为保证图片质量，轮播图片请尽量选择200*200的方形图片,图片大小不要超过500KB,一般在30KB-100KB之间
                <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
                    预览：
                    <div class="layui-upload-list" id="div-slide_show">
                        {volist name="$bannerArr" id='ba'}
                        <img src="/upload/{$ba}" alt="{$ba}" title="点击删除" style="width: 100px;height: 100px" class="layui-upload-img" onclick="delMultipleImgs(this,'banner')">
                        {/volist}
                    </div>
                </blockquote>
            </div>
        </div>
    </div>
    <!--<div class="layui-form-item layui-form-text">-->
        <!--<label class="layui-form-label">详情上传</label>-->
        <!--<div class="layui-input-block">-->
            <!--<div class="layui-textarea" id='LAY_demo_editor' ></div>-->
        <!--</div>-->
    <!--</div>-->
    <div class="layui-form-item ">
        <label class="layui-form-label">详情上传</label>
        <input type="hidden" id="detailHidden" name="detailurl" value="">
        <input type="hidden" id="olddetailHidden" name="olddetailurl" value="{$info.detailurl}">
        <div class="layui-input-inline uploadHeadImage">
            <div class="layui-upload-drag" id="detailImg">
                <i class="layui-icon"></i>
                <p>点击上传图片，或将图片拖拽到此处</p>
            </div>
        </div>
        <div class="layui-input-inline">
            <div class="layui-upload-list" style="margin-top: 5px;">
                <img class="layui-upload-img headImage" style="height: 100px;" src="/upload/{$info.detailurl}" id="detailurl">
                <p id="demoTexts"></p>
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn">确认保存</button>
        </div>
    </div>
</div>
{include file="public/footer" /}
<script src="/static/taginput/src/jquery.tagsinput-revisited.js"></script>
<script src="/static/layuimini/lib/jq-module/zyupload/zyupload-1.0.0.min.js" charset="utf-8"></script>

<script>
    var banner_url=[{$info.banner_url}];
    $(function() {
        $('#form-tags-1').tagsInput({
            'delimiter': ',',
            placeholder: '添加标签,回车键添加下一个',
        });
    });
    layui.use(['form','wangEditor','laydate','upload'], function () {
        var form = layui.form,
            layer = layui.layer,
            wangEditor = layui.wangEditor,
            upload = layui.upload,
            laydate=layui.laydate,
            $ = layui.$;
        // 上架开始日期
        var insShelf = laydate.render({
            elem: '#start_time'
            , min: 0
            , calendar: true
            , type: 'datetime'
            , done: function (value, date) {
                //更新结束日期的最小日期
                insUnder.config.min = lay.extend({}, date, {
                    month: date.month - 1
                });

                //自动弹出结束日期的选择器
                //insUnder.config.elem[0].focus();
            }
        });
        //上架结束日期
        var insUnder = laydate.render({
            elem: '#end_time'
            , min: 0
            , calendar: true
            , type: 'datetime'
            , done: function (value, date) {
                //更新开始日期的最大日期
                insShelf.config.max = lay.extend({}, date, {
                    month: date.month - 1
                });
            }
        });
        //富文本


         let editor = new wangEditor('#LAY_demo_editor');
        editor.customConfig.uploadImgServer = "/admin/Prize/Doupload";
        editor.customConfig.uploadFileName = 'image';
        editor.customConfig.pasteFilterStyle = false;
        editor.customConfig.uploadImgMaxLength = 5;
        editor.customConfig.uploadImgParams = {
            'mark': 'img',
            'field': 'image',
            'oldSrc': ''

        }
        editor.customConfig.uploadImgHooks = {
            before: function (xhr, editor, files) {
                // 图片上传之前触发
                // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，files 是选择的图片文件

                // 如果返回的结果是 {prevent: true, msg: 'xxxx'} 则表示用户放弃上传
                // return {
                //     prevent: true,
                //     msg: '放弃上传'
                // }
            },
            success: function (xhr, editor, result) {
                // 图片上传并返回结果，图片插入成功之后触发
                // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
            },
            fail: function (xhr, editor, result) {
                // 图片上传并返回结果，但图片插入错误时触发
                // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
            },
            error: function (xhr, editor) {
                // 图片上传出错时触发
                // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
            },
            timeout: function (xhr, editor) {
                // 图片上传超时时触发
                // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
            },

            // 如果服务器端返回的不是 {errno:0, data: [...]} 这种格式，可使用该配置
            // （但是，服务器端返回的必须是一个 JSON 格式字符串！！！否则会报错）
            customInsert: function (insertImg, result, editor) {
                // 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！）
                // insertImg 是插入图片的函数，editor 是编辑器对象，result 是服务器端返回的结果
                // 举例：假如上传图片成功后，服务器端返回的是 {url:'....'} 这种格式，即可这样插入图片：
                let url = "{$Think.const.__MY_ROOT_PUBLIC__}"+"upload/"+result.src
                insertImg(url)

            }
        }
        editor.customConfig.customAlert = function (info) {
            layer.msg(info.msg);
        };
        editor.create();
        //初始化编辑器数据
        let info2 = "{$info.detailurl}";
        let info3=$('<div>').html(info2).text()
        editor.txt.html(info3)
        upload.render({
            elem: '#multiple_banner',
            url: '/admin/Prize/Doupload',
            data: {
                'mark': 'img',
                'field': 'activeBanner',
                'oldSrc': ''
            },
            field: 'activeBanner',
            accept: 'images',
            acceptMime: 'image/*',
            multiple: true,
            before: function(obj) {
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result) {
                    $('#div-slide_show').append('<img src="' + result + '" alt="' + file.name +
                        '" title="点击删除" style="width: 100px;height: 100px" class="layui-upload-img" onclick="delMultipleImgs(this,\'banner\')">')
                });
            },
            done: function(res) {
                //如果上传成功
                if (res.status == true) {
                    //追加图片成功追加文件名至图片容器
                    banner_url.push(res.src);
                    $('#banner_images').val(banner_url);
                }
            },
            allDone: function(obj) {

            }
        });
        //单图片拖拽上传
        let uploadInst = upload.render({
            elem: '#headImg',
            url: '/admin/Prize/Doupload',
            size: 500,
            field: 'thumb_img',
            accept: 'images',
            acceptMime: 'image/*',
            before: function(obj) {
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result) {
                    $('#imgurl').attr('src', result); //图片链接（base64）;
                });
                this.data = {
                    'mark': 'img',
                    'field': 'thumb_img',
                    'oldSrc': $("#imgurlHidden").val()
                };
            },
            done: function(res) {
                //如果上传失败
                if (res.status == false) {
                    return layer.msg('上传失败');
                }
                //上传成功
                //打印后台传回的地址: 把地址放入一个隐藏的input中, 和表单一起提交到后台, 此处略..
                // window.parent.uploadHeadImage(res.src);
                $("#imgurlHidden").val(res.src);
                let demoText = $('#demoText');
                demoText.html('<span style="color: #8f8f8f;">上传成功!!!</span>');
            },
            error: function() {
                //演示失败状态，并实现重传
                let demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function() {
                    uploadInst.upload();
                });
            },

        });
        //单图片拖拽上传
        let uploaddetail = upload.render({
            elem: '#detailImg',
            url: '/admin/Prize/Doupload',
            size: 500,
            field: 'thumb_img',
            accept: 'images',
            acceptMime: 'image/*',
            before: function(obj) {
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result) {
                    $('#detailurl').attr('src', result); //图片链接（base64）;
                });
                this.data = {
                    'mark': 'img',
                    'field': 'thumb_img',
                    'oldSrc': $("#detailHidden").val()
                };
            },
            done: function(res) {
                //如果上传失败
                if (res.status == false) {
                    return layer.msg('上传失败');
                }
                //上传成功
                //打印后台传回的地址: 把地址放入一个隐藏的input中, 和表单一起提交到后台, 此处略..
                // window.parent.uploadHeadImage(res.src);
                $("#detailHidden").val(res.src);
                let demoText = $('#demoTexts');
                demoText.html('<span style="color: #8f8f8f;">上传成功!!!</span>');
            },
            error: function() {
                //演示失败状态，并实现重传
                let demoText = $('#demoTexts');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function() {
                    uploadInst.upload();
                });
            },

        });
        //监听指定开关
        form.on('switch(switchTest)', function (data) {
            if(this.checked){
                this.value=1;
            }else{
                this.value=2;
            }
        });
        form.on('radio(pro_type)',function(data){
            let str='';
            if(data.value==1){
                str="<label class=\"layui-form-label\">金额</label>\n" +
                    "        <div class=\"layui-input-block\">\n" +
                    "            <input type=\"number\" name=\"pro_number\" min=\"0\" lay-verify=\"required\"  value=\"\" class=\"layui-input\" autocomplete='off'>\n" +
                    "        </div>";
            }else if(data.value==2){
                str="<label class=\"layui-form-label\">数量</label>\n" +
                    "        <div class=\"layui-input-block\">\n" +
                    "            <input type=\"number\" name=\"pro_number\" min=\"1\" lay-verify=\"required\"  value=\"\" class=\"layui-input\" autocomplete='off'>\n" +
                    "        </div>";
            }else{
                str="<label class=\"layui-form-label\">选择卡券</label>\n" +
                    "        <div class=\"layui-input-block\" style=\"display: flex\">\n" +
                    "            <button class=\"layui-btn\" onclick=\"checkVoucher()\">点击添加</button>\n" +
                    "            <input type=\"hidden\" name=\"voucher_id\" id=\"voucher_id\">\n" +
                    "            <div style=\"margin-left:10px;padding-top:10px;\" id=\"voucherShow\"></div>\n" +
                    "        </div>";
            }
            $("#showContext").html(str);
        })
        //监听提交
        form.on('submit(saveBtn)', function (data) {
            data.field.pro_status = data.field.pro_status ? 1 : 2;
            $.ajax({
                url: "/admin/Active/integral_exchange_write?action=ajax",
                type: 'post',
                async: true,
                data: data.field,
                dataType: 'json',
                success: function (res) {
                    if(res.status){
                        parent.layer.msg("操作成功!", {icon:1,time: 1000}, function () {
                            //重新加载父页面
                            parent.location.reload();
                        });
                        return;
                    }else{
                        layer.msg(res.msg);
                    }
                }
            });
            return false;
        });
    });
    /**
     * @context 卡券列表
     */
    var voucherOpen;
    function checkVoucher()
    {
        $.ajax({
            url: "/admin/Prize/getsPrizeVoucherList",
            type: 'post',
            async: true,
            data: {},
            dataType: 'json',
            success: function (res) {
                voucherOpen=layer.open({
                    type: 1 ,
                    title: "卡券列表",
                    area: ['800px', '500px'],
                    shade: 0.5,
                    maxmin: true,
                    content:res.data,
                    success:function(layero,index){
                        // 禁止回车键打开弹窗
                        $(":focus").blur();
                    }
                })
                return false;
            }
        });
    }
    /**
     * @context 选择卡券
     * @param id
     * @param title
     * @param price
     */
    function chooseVoucher(id,title,price)
    {
        $("#voucher_id").val(id);
        $("#voucher_title").val(title);
        $("#voucherShow").html(title+"    ￥"+price);
        layer.close(voucherOpen);
    }
    /**
     *
     * @context 删除图片
     * @param this_img
     * @param type
     */
    function delMultipleImgs(this_img, type) {
        //获取下标
        var subscript = $("#div-slide_show img").index(this_img);
        //删除图片
        this_img.remove();
        if (type == 'banner') {
            //删除轮播图数组
            banner_url.splice(subscript, 1);
            $('#banner_images').val(banner_images);
        } else {
            //删除详情图数组
            picurl_images.splice(subscript, 1);
            $('#picurl_images').val(picurl_images);
        }
        //返回
        return;
    }
</script>
</body>
</html>